<template>
  <div class="momentContainer">
    <div class="topInfo">
      <!--接受url给到子子组件-->
      <AvatarProfileCard :userId="authorId" :avatarUrl="avatarUrl" :sex="sex"/>
      <a class="authorName" @click.stop="toProfile(authorId)" :style="{color: levelColor[level]}">{{authorName}}</a>
      <span class="replyTime">一小时前回复</span>
      <span class="createTime">{{createTime}}</span>
    </div>
    <div class="title">{{articleTitle}}</div>
    <div class="footerArea">
      {{`回复 ${replyNumber}`}}
      <span class="columnLine">|</span>
      {{`赞 ${praiseNumber}`}}
      <span class="columnLine">|</span>
      {{`浏览 ${passNumber}`}}
    </div>
  </div>
</template>

<script>
import AvatarProfileCard from './AvatarProfileCard.vue'
import levelColor from '../constant/levelColor.js'
export default {
  data () {
    return {
      levelColor: '',
      userInfo: {}
    }
  },
  created () {
    this.levelColor = levelColor
  },
  props: {
    avatarUrl: {
      type: String
    },
    authorId: {
      type: Number
    },
    authorName: {
      type: String
    },
    title: {
      type: String
    },
    articleTitle: {
      type: String
    },
    replyNumber: {
      type: Number
    },
    praiseNumber: {
      type: Number
    },
    passNumber: {
      type: Number
    },
    createTime: {
      type: String
    },
    sex: {
      type: Number
    },
    level: {
      type: Number
    }
  },
  methods: {
    toProfile (authorId) {
      if (window.sessionStorage.getItem('userInfo')) {
        const id = JSON.parse(window.sessionStorage.getItem('userInfo')).id
        if (id === authorId) {
          this.$router.push('/profile')
        } else {
          this.$router.push(`/profile/${authorId}`)
        }
      }
    }
  },
  components: {
    AvatarProfileCard
  }
}
</script>

<style scoped>
  .momentContainer{
    position: relative;
    margin: 20px 0;
    min-height: 80px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
  }
  .topInfo{
    padding-top: 10px;
    display: flex;
    align-items: center;
  }
  .topInfo .avatar{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .topInfo .createTime{
    margin-left: auto;
    margin-right: 0;
    align-self: flex-start;
    font-size: 12px;
    color: #bbb;
  }
  .topInfo .authorName{
    margin: 0 20px;
    align-self: flex-start;
    text-align: center;
  }
  .topInfo .replyTime{
    font-size: 12px;
    color: #888888;
    align-self: flex-start;
    margin-top: 2px;
  }
  .title{
    font-weight: 700;
    font-size: 16px;
    margin: 10px 0;
    margin-left: 10px;
  }
  .footerArea{
    position: absolute;
    right: 10px;
    bottom: 5px;
    color: #bbbbca;
    font-size: 12px;
  }
  .columnLine{
    margin: 0 5px;
  }
  .momentContainer:hover{
    transform: translate(0,-5px);
    transition: transform 0.5s;
    cursor: pointer;
  }

</style>
